[FEATURE] Kuwait Theme: Radio group styling #2737

FaithDaka · 2025-01-21T09:54:03Z

19/02/25 UPDATED by @jfmcquade:

PR Checklist

PR title descriptive (can be used in release notes)

Description

Adds additional parameter options for the radio_button_grid component:

New variant: flex
- Arranges the items in a "flexbox" layout
- Parameters item_width (taken to be minimum item width) and grid_gap are still applied for this variant
New style: secondary
- Applies secondary colour styling to the items
- Style variables are exposed to theming

As these are independent of each other, they can be set in any combination. E.g. an instance of the component with the default variant (grid) can have style: secondary applied.

At the bottom of the demo sheet is an example of the configuration to achieve the requested use case in #2641.

Git Issues

Closes #2641

Screenshots

comp_radio_button_grid

Demo by theme:

default	professional	pfr	plh_facilitator_mx	early_family_math	plh_kids_kw	plh_kids_tz

jfmcquade

The code looks good, nice to have the differences scoped entirely to the CSS styles.

See my inline comments: I think the flex/grid should be set through the variant rather than style param. But if there's not time to fix before a release is needed, I'm happy to merge as-is

...app/shared/components/template/components/radio-button-grid/radio-button-grid.component.html

src/app/shared/components/template/components/radio-button-grid/radio-button-grid.component.ts

…pp-builder into bug-kw-radio-group-styling

FaithDaka · 2025-01-22T05:04:22Z

Changes made @jfmcquade

jfmcquade

Thanks for making the updates. I've added some minor comments inline, but I've also noticed an issue with the comp_radio_button_grid demo template: the text of the second button, which wraps over three lines, is obscured by the image:

...app/shared/components/template/components/radio-button-grid/radio-button-grid.component.scss

esmeetewinkel · 2025-01-28T09:57:47Z

I'll review this when code review has passed, @FaithDaka could you check me again when @jfmcquade has approved?

jfmcquade · 2025-02-19T11:48:16Z

@esmeetewinkel I've updated the PR and description following our conversation, should now be ready for testing

github-actions · 2025-02-19T13:50:25Z

Visit the preview URL for this PR (updated for commit 4a63a85):

https://plh-teens-app1--pr2737-bug-kw-radio-group-s-4s48mh5m.web.app

_{(expires Wed, 05 Mar 2025 15:43:43 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: e4c0bab6b08dd290fbf002fd6e07987fa4b5fce1}

esmeetewinkel

Thanks!

When only images or only text are provided, the button height should adapt to the content.
I had understood item-width is a min width, but it seems to behave more like a max width in the flex case (or at least setting is causes narrower buttons).

Screenshot in debug deployment:

Screenshots in plh_kids_kw deployment:
(without specifying item_width)

(specifying item_width: 96px)

jfmcquade · 2025-02-19T15:38:46Z

Thanks!

When only images or only text are provided, the button height should adapt to the content.

Good point, fixed with 0901aa2

I had understood item-width is a min width, but it seems to behave more like a max width in the flex case (or at least setting is causes narrower buttons).

Ah, this is because the default min-width, used if none was specified, was set larger than 96px. I've updated now so that it should behave as expected.

0901aa2 also includes changes to make the items more likely to wrap onto a single line, as they were taking up a lot of space. Part of this is reducing the image size (to the app-wide maximum heigh for icons). Let me know if this looks right or if the image size should be tweaked

esmeetewinkel

Thanks for making those final changes. Looks very much like the design to me!

FaithDaka added 2 commits January 21, 2025 12:43

support added for flex radio-buttons

c665722

flex button styling

0a2155b

FaithDaka added the feature Work on app features/modules label Jan 21, 2025

FaithDaka added this to the ParentApp Kids KW Dec 2024 milestone Jan 21, 2025

FaithDaka requested review from jfmcquade and esmeetewinkel January 21, 2025 09:54

FaithDaka self-assigned this Jan 21, 2025

FaithDaka linked an issue Jan 21, 2025 that may be closed by this pull request

[BUG] KW radio group styling #2641

Closed

FaithDaka temporarily deployed to debug January 21, 2025 09:54 — with GitHub Actions Inactive

jfmcquade requested changes Jan 21, 2025

View reviewed changes

...app/shared/components/template/components/radio-button-grid/radio-button-grid.component.html Outdated Show resolved Hide resolved

src/app/shared/components/template/components/radio-button-grid/radio-button-grid.component.ts Outdated Show resolved Hide resolved

Merge branch 'master' of https://github.com/IDEMSInternational/open-a…

3c8a558

…pp-builder into bug-kw-radio-group-styling

FaithDaka temporarily deployed to debug January 22, 2025 04:52 — with GitHub Actions Inactive

FaithDaka added 2 commits January 22, 2025 08:03

naming refactor

0ecbab2

radio-buttons styling

a83c771

FaithDaka temporarily deployed to debug January 22, 2025 05:04 — with GitHub Actions Inactive

jfmcquade self-requested a review January 23, 2025 14:55

jfmcquade requested changes Jan 23, 2025

View reviewed changes

Merge branch 'master' into bug-kw-radio-group-styling

a7e1436

jfmcquade temporarily deployed to debug January 23, 2025 15:09 — with GitHub Actions Inactive

Merge branch 'master' into bug-kw-radio-group-styling

1e1b2a3

esmeetewinkel temporarily deployed to debug January 28, 2025 09:54 — with GitHub Actions Inactive

esmeetewinkel removed their request for review January 28, 2025 09:56

Merge branch 'master' into bug-kw-radio-group-styling

3ab5349

jfmcquade temporarily deployed to debug February 19, 2025 11:47 — with GitHub Actions Inactive

jfmcquade temporarily deployed to debug February 19, 2025 11:48 — with GitHub Actions Inactive

jfmcquade approved these changes Feb 19, 2025

View reviewed changes

esmeetewinkel added the test - preview Create a preview deployment of the PR label Feb 19, 2025

esmeetewinkel temporarily deployed to debug February 19, 2025 13:45 — with GitHub Actions Inactive

esmeetewinkel temporarily deployed to debug February 19, 2025 13:49 — with GitHub Actions Inactive

esmeetewinkel requested changes Feb 19, 2025

View reviewed changes

esmeetewinkel temporarily deployed to debug February 19, 2025 15:20 — with GitHub Actions Inactive

esmeetewinkel temporarily deployed to debug February 19, 2025 15:24 — with GitHub Actions Inactive

chore: fix min width and height

0901aa2

jfmcquade temporarily deployed to debug February 19, 2025 15:36 — with GitHub Actions Inactive

jfmcquade had a problem deploying to debug February 19, 2025 15:36 — with GitHub Actions Error

Merge branch 'master' into bug-kw-radio-group-styling

4a63a85

jfmcquade temporarily deployed to debug February 19, 2025 15:39 — with GitHub Actions Inactive

jfmcquade requested a review from esmeetewinkel February 19, 2025 15:39

jfmcquade temporarily deployed to debug February 19, 2025 15:39 — with GitHub Actions Inactive

jfmcquade temporarily deployed to debug February 19, 2025 15:43 — with GitHub Actions Inactive

esmeetewinkel approved these changes Feb 19, 2025

View reviewed changes

esmeetewinkel merged commit 9817b20 into master Feb 19, 2025
8 checks passed

esmeetewinkel deleted the bug-kw-radio-group-styling branch February 19, 2025 17:08

esmeetewinkel mentioned this pull request Feb 20, 2025

content: 1.2.24 ParentingForLifelongHealth/plh-kids-app-kw-content#158

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FEATURE] Kuwait Theme: Radio group styling #2737

[FEATURE] Kuwait Theme: Radio group styling #2737

FaithDaka commented Jan 21, 2025 •

edited by jfmcquade

Loading

jfmcquade left a comment

FaithDaka commented Jan 22, 2025

jfmcquade left a comment

esmeetewinkel commented Jan 28, 2025

jfmcquade commented Feb 19, 2025

github-actions bot commented Feb 19, 2025 •

edited

Loading

esmeetewinkel left a comment •

edited

Loading

jfmcquade commented Feb 19, 2025 •

edited

Loading

esmeetewinkel left a comment

[FEATURE] Kuwait Theme: Radio group styling #2737

[FEATURE] Kuwait Theme: Radio group styling #2737

Conversation

FaithDaka commented Jan 21, 2025 • edited by jfmcquade Loading

Description

Git Issues

Screenshots

jfmcquade left a comment

Choose a reason for hiding this comment

FaithDaka commented Jan 22, 2025

jfmcquade left a comment

Choose a reason for hiding this comment

esmeetewinkel commented Jan 28, 2025

jfmcquade commented Feb 19, 2025

github-actions bot commented Feb 19, 2025 • edited Loading

esmeetewinkel left a comment • edited Loading

Choose a reason for hiding this comment

jfmcquade commented Feb 19, 2025 • edited Loading

esmeetewinkel left a comment

Choose a reason for hiding this comment

FaithDaka commented Jan 21, 2025 •

edited by jfmcquade

Loading

github-actions bot commented Feb 19, 2025 •

edited

Loading

esmeetewinkel left a comment •

edited

Loading

jfmcquade commented Feb 19, 2025 •

edited

Loading